<!-- 人事 主界面-->
<template>
  <!-- 右侧内容主体区域 -->
    <div style="height: 100%; min-height: 235px;">
      <table class="layouttable" style="cursor: pointer;">
        <thead>
        <tr>
          <th style="width:25%"></th>
          <th style="width:25%"></th>
          <th style="width: 20.0472%;"></th>
          <th style="width: 29.9528%;"></th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td colspan="4" rowspan="1">
            <div class="Element_Departmentinformation">
              <div class="infor">
                <img src="@/assets/img/personnelImage/人事部icon_rs.png">
                <div>
                  <h3>人事部</h3>
                  <span>The personnel department</span>
                </div>
              </div>
              <ul class="cont">
                <li><a target="_blank" class="cursor-pointer"><h3>79</h3><span>人员缺口</span></a></li>
                <li><a target="_blank" class="cursor-pointer"><h3>238份</h3><span>待跟进简历</span></a></li>
                <li><a target="_blank" class="cursor-pointer"><h3>13场</h3><span>面试安排</span></a></li>
                <li><a target="_blank" class="cursor-pointer"><h3>5</h3><span>合同到期</span></a></li>
                <li><a target="_blank" class="cursor-pointer"><h3>37</h3><span>待审核绩效</span></a></li>
                <li><a target="_blank" class="cursor-pointer"><h3>421.73万元</h3><span>本月工资总额</span></a></li>
              </ul>
            </div>
          </td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
        </tr>
        <tr>
          <td colspan="3" rowspan="3">
            <div class="group1">
              <div class="item"
                   style="margin-top: 27px;
                       position: static; width: auto; height: auto; left: 10.0093px; top: 120.002px; z-index: 1;">
                <div style="width: auto;">
                  <div style="height: 330px;">
                    <el-card class="box-card">
                      <div style="margin-bottom: 1.7em">
                        <font class="title-font">人才招聘</font>
                      </div>
                      <el-table :data="tableData" style="width: 100%;font-size: 10px;margin-left: -1em;"
                                height="280"
                                :header-cell-style="{background:'rgb(242,245,249)',color:'#606266'}">
                        <el-table-column prop="date" label="岗位名称" min-width="32%"/>
                        <el-table-column prop="name" label="缺口数" min-width="12%"/>
                        <el-table-column prop="state" label="收到简历" min-width="13%"/>
                        <el-table-column prop="city" label="人事审核" min-width="13%"/>
                        <el-table-column prop="address" label="业务审核" min-width="13%"/>
                        <el-table-column prop="zip" label="操作" width="90">
                          <template #default="xx">
                            <el-button @click="popLink(xx.row)">{{ xx.row.zip }}</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </div>
                </div>
              </div>
              <div class="item"
                   style="margin-top: 70px; position: relative;">
                <div class="content" style="width: auto;">
                  <div class="content_view" style="height: 420px;">
                    <el-card class="box-card">
                      <div style="margin-bottom: 1.7em">
                        <font class="title-font">流程中心</font>
                      </div>
                      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="入职" name="first">
                          <el-table :data="tableData" style="width: 100%;font-size: 10px;margin-left: -1em;"
                                    height="250"
                                    :header-cell-style="{background:'rgb(242,245,249)',color:'#606266'}">
                            <el-table-column prop="date" label="流程标题" min-width="32%"/>
                            <el-table-column prop="name" label="申请人" min-width="12%"/>
                            <el-table-column prop="state" label="人事审核" min-width="12%"/>
                            <el-table-column prop="city" label="时间" min-width="12%"/>
                            <el-table-column prop="address" label="当前节点" min-width="12%"/>
                          </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="转正" name="second">Config</el-tab-pane>
                        <el-tab-pane label="调岗" name="third">Role</el-tab-pane>
                        <el-tab-pane label="离职" name="fourth">Task</el-tab-pane>
                        <el-tab-pane label="考勤" name="fifth">fifth</el-tab-pane>
                        <el-tab-pane label="薪资" name="sixth">sixth</el-tab-pane>
                      </el-tabs>
                    </el-card>
                  </div>
                </div>
              </div>
              <div class="item"
                   style="margin-top: 10px;
                       position: static; width: auto; height: auto; left: 10.0093px; top: 120.002px; z-index: 1;">
                <div class="content" style="width: auto;">
                  <div style="height: 330px;">
                    <el-card class="box-card">
                      <div style="margin-bottom: 1.7em">
                        <font class="title-font">绩效考核</font>
                      </div>
                      <el-table :data="tableData" style="width: 100%;font-size: 10px;margin-left: -1em;"
                                height="280"
                                :header-cell-style="{background:'rgb(242,245,249)',color:'#606266'}">
                        <el-table-column prop="date" label="姓名" min-width="32%"/>
                        <el-table-column prop="name" label="岗位" min-width="12%"/>
                        <el-table-column prop="state" label="考核期间" min-width="12%"/>
                        <el-table-column prop="city" label="绩效分值" min-width="12%"/>
                        <el-table-column prop="address" label="状态" min-width="12%">
                        <template #default="xx">
                          <el-tag v-if="xx.row.address !== null">已开始</el-tag>
                          <el-tag class="ml-2" type="info" v-else-if="xx.row.address === null">待审核</el-tag>
                          <el-tag class="ml-2" type="danger" v-else>绩效异常</el-tag>
                        </template>
                        </el-table-column>
                        <el-table-column prop="zip" label="绩效打分" width="85">
                          <template #default="x">
                            <el-button v-if="x.row.date !== 0">绩效打分</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </div>
                </div>
              </div>
            </div>
          </td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td colspan="1" rowspan="3">
            <div class="group" style="position: relative;top: -338px">
              <div class="item" style="margin: 10px 10px 0px 0px; position: relative;">
                <el-card class="box-card">
                  <div style="margin-bottom: 1.7em">
                    <font class="title-font">面试通知</font>
                  </div>
                  <div style="border-collapse: collapse; width: 100%; height: auto; display: block;">
                    <div id="root">
                      <div class="">
                        <a class=" flex text-center" href="" target="_blank">
                          <div class=" flex">
                            <div class="whcbg-24 flex flex-col justify-center">
                              <h2>27</h2>
                              <span>2019-12</span>
                            </div>
                          </div>
                          <div class="flex-col justify-between">
                            <div class="mb-3">
                              <h3>钱彭彭<span>（男）</span></h3>
                              <span>2019-12-27 | 产品经理</span>
                            </div>
                            <div class="blues">
                              <span style="width: 1px">8年工作经验</span>
                              <span>CET4</span>
                              <span>985本科</span></div>
                          </div>
                        </a>
                        <a class=" flex text-center" href="" target="_blank">
                          <div class=" flex">
                            <div class="whcbg-24 flex flex-col justify-center">
                              <h2>27</h2>
                              <span>2019-12</span>
                            </div>
                          </div>
                          <div class="flex-col justify-between">
                            <div class="mb-3">
                              <h3>钱彭彭（男）</h3>
                              <span>2019-12-27 | 产品经理</span>
                            </div>
                            <div class="blues">
                              <span style="width: 1px">8年工作经验</span>
                              <span>CET4</span>
                              <span>985本科</span></div>
                          </div>
                        </a>
                        <a class=" flex text-center" href="" target="_blank">
                          <div class=" flex">
                            <div class="whcbg-24 flex flex-col justify-center">
                              <h2>27</h2>
                              <span>2019-12</span>
                            </div>
                          </div>
                          <div class="flex-col justify-between">
                            <div class="mb-3">
                              <h3>钱彭彭<span>（男）</span></h3>
                              <span>2019-12-27 | 产品经理</span>
                            </div>
                            <div class="blues">
                              <span style="width: 1px">8年工作经验</span>
                              <span>CET4</span>
                              <span>985本科</span></div>
                          </div>
                        </a>
                        <a class=" flex text-center" href="" target="_blank">
                          <div class=" flex">
                            <div class="whcbg-24 flex flex-col justify-center">
                              <h2>27</h2>
                              <span>2019-12</span>
                            </div>
                          </div>
                          <div class="flex-col justify-between">
                            <div class="mb-3">
                              <h3>钱彭彭（男）</h3>
                              <span>2019-12-27 | 产品经理</span>
                            </div>
                            <div class="blues">
                              <span style="width: 1px">8年工作经验</span>
                              <span>CET4</span>
                              <span>985本科</span></div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
        </tr>
        <tr>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
          <td rowspan="1" colspan="1" style="display: none;"></td>
        </tr>
        </tbody>
      </table>
    </div>
</template>

<script>
// import {pfe} from '@/assets/js/personnelJs/personnelJs.js' //延迟加载defer
import { ref } from 'vue'
export default {
  data() {
    const activeName = ref('first')
    const tableData = [
      {
        date: '上海大区-办公软件产品销售-销售专员',
        name: '32',
        state: '475',
        city: '234',
        address: '245',
        zip: '发布招聘',
      },
      {
        date: '人工智能及算法方向-Java开发工程师',
        name: '32',
        state: '475',
        city: '234',
        address: '245',
        zip: '发布招聘',
      },
      {
        date: '地方机构-项目交付部-实施工程师',
        name: '32',
        state: '475',
        city: '234',
        address: '245',
        zip: '发布招聘',
      },
    ]
    return {
      // 是否折叠
      activeName:activeName,
      tableData: tableData,
      isCollapse: false
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 获取所有的菜单数据
    async getMenuList() {
      const {data: res} = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      // 成功了，进行赋值
      this.menulist = res.data
      console.log(res)
    },
    // 点击按钮，切换菜单的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    popLink(ax){
      // let routeData = this.$router.resolve({
      //   path: '/pop',
      //   query: {  valax:JSON.stringify(ax) }
      // });
      // window.open(routeData.href, '_blank');
      this.$router.push({path:'pop',params:{valax:ax}})
      console.log(ax)
    }
  },
}
</script>
<style lang="scss" scoped>
@import "./src/assets/css/personnelCss/IPageCss.scss";
</style>